<template>
	<view>
		<uni-nav-bar fixed="true" :title=title backgroundColor="#f5f5f5" height="120rpx" @clickLeft="back"
			statusBar="true">
			<view slot="left">
				<uni-icons type="back" size="30"></uni-icons>
			</view>
		</uni-nav-bar>
		<view class="item" v-for="(user,index) in subscribeList" :key="user.uid">
			<image :src="user.avatar" mode="aspectFill" class="avatar" @click="info(user.uid)"></image>
			<view class="username" @click="info(user.uid)">
				{{user.username}}
			</view>
			<view v-if="type === 1" class="btn" @click="sub = index">
				已关注
			</view>
			<view v-else class="btn" @click="info(user.uid)">
				查看
			</view>
		</view>
		<view class="more" v-if="!more">
			已经到底了哦~~~
		</view>
		<u-modal :show="sub!==-1" title="温馨提示" content="是否取消关注此用户?" width="500rpx" @confirm="dis_sub(sub)"
			@cancel="sub = -1" showCancelButton>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: "",
				sub: -1,
				more: true,
				type: 1,
				isMe: true,
				subscribeList: []
			}
		},
		onLoad: function(option) {
			this.type = Number(option.type)
			if (this.type === 3 || this.type === 4)
				this.isMe = false
			let uid = ""
			if (this.isMe) {
				this.title = this.type === 1 ? "我的关注" : "我的粉丝"
				uid = this.$store.state.user.uid
			} else {
				this.title = this.type === 3 ? "ta的粉丝" : "ta的关注"
				uid = option.uid
			}
			this.getSubscribeList(uid)
		},
		methods: {
			info(uid) {
				uni.navigateTo({
					url: "../pserson_info/pserson_info?uid=" + uid
				})
			},
			dis_sub(index) {
				console.log("取消关注" + this.subscribeList[index].uid);
				this.$request.TokenRequest({
					url: "/user/UnSubscribeUser"
				}, {
					BUid: this.subscribeList[index].uid
				}).then(res => {
					if (res.state === 200) {
						uni.showToast({
							icon: "success",
							title: "取消关注成功!"
						})
						this.subscribeList.splice(index, 1)
					} else {
						uni.showToast({
							icon: "none",
							title: res.message
						})
					}
				})
				this.sub = -1
			},
			getSubscribeList(uid) {
				let api = ""
				if (this.isMe)
					api = this.type === 1 ? "/user/mySubscribe" : "/user/myBeSubscribed"
				else
					api = this.type === 4 ? "/user/mySubscribe" : "/user/myBeSubscribed"
				this.$request.TokenRequest({
					url: api
				}, {
					uid: uid
				}).then(res => {
					if (res.state === 200) {
						this.subscribeList = this.subscribeList.concat(res.data)
					} else {
						uni.showToast({
							icon: "none",
							title: res.message,
						})
					}
				})
			},
			back() {
				uni.navigateBack({})
			}
		},
		mounted() {
			//TODO:获取一部分关注用户
		},
		onReachBottom() {
			console.log("reach");
		}
	}
</script>

<style lang="scss" scoped>
	.item {
		width: 90%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 5rpx solid #F6F6F6;

		.avatar {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}

		.username {
			font-size: 30rpx;
			font-weight: bold;
			padding-left: 20rpx;
		}

		.btn {
			width: 110rpx;
			text-align: center;
			position: absolute;
			font-size: 30rpx;
			right: 40rpx;
			color: #808489;
			border: 3rpx solid #808489;
			border-radius: 10rpx;
		}
	}

	.more {
		text-align: center;
		font-size: 30rpx;
		color: #808489;
		padding: 20rpx 0;
	}
</style>
